<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'

import { useAddOrEditRight } from '@fl/api/man-api'
import FlUpload from '@fl/components/fl-upload.vue'
import SubmitBtn from '@fl/components/submit-btn.vue'
import { ElLoading } from 'element-plus'
import { cloneDeep } from 'lodash-es'

const flUpload = ref()

const { isPending, mutate } = useAddOrEditRight()

const visible = defineModel<boolean>('visible', { required: true })

const id = defineModel<any>('id')

const form = defineModel<any>('form')

const title = computed(() => id.value ? '编辑自定义权益' : '添加自定义权益')

const formRef = ref()

const state = ref<any>(
    {
        description: '',
        imageUrl: '',
        rightCode: '',
        rightName: '',
        shortName: '',
        status: true,
    },
)

const columns: PlusColumn[] = [
    {
        colProps: {
            span: 24,
        },
        fieldProps: {
            maxlength: 50,
        },
        label: '权益名称',
        prop: 'rightName',
    },
    {
        colProps: {
            span: 24,
        },
        fieldProps: {
            maxlength: 50,
        },
        label: '权益简称',
        prop: 'shortName',
    },
    {
        colProps: {
            span: 24,
        },
        fieldProps: {
            maxlength: 50,
        },
        label: '权益编码',
        prop: 'rightCode',
    },
    {
        colProps: {
            span: 24,
        },
        fieldProps: {
            maxlength: 500,
        },
        label: '权益说明',
        prop: 'description',
        valueType: 'textarea',
    },
    {
        colProps: {
            span: 24,
        },
        label: '权益图标',
        prop: 'imageUrl',

    },
    {
        colProps: {
            span: 24,
        },
        label: '权益状态',
        prop: 'status',
        valueType: 'switch',
    },
]

const rules = {
    description: [
        {
            message: '请输入权益说明',

            required: true,
        },
    ],
    imageUrl: [
        {
            message: '请上传权益图标',
            required: true,
        },
    ],
    rightCode: [
        {
            message: '请输入权益编码',
            pattern: '[^ \x20]+',
            required: true,
        },
    ],
    rightName: [
        {
            message: '请输入权益名称',
            pattern: '[^ \x20]+',
            required: true,
        },
    ],
    shortName: [
        {
            message: '请输入权益简称',
            pattern: '[^ \x20]+',
            required: true,
        },
    ],

}

function cancel() {
    visible.value = false
}

function reset() {
    id.value = ''
    form.value = ''
    formRef.value.formInstance.resetFields()
}

async function save() {
    const valid = await formRef.value.formInstance.validate()
    if (valid) {
        const params = {
            ...unref(state),
            id: id.value,
            status: state.value.status ? 1 : 0,
        }
        mutate(params, {
            onSuccess: () => {
                ElMessage.success('操作成功')
                cancel()
            },
        })
    }
}

function servicesLoading(node, str, lock, bg) {
    return ElLoading.service({
 	background: bg, // 背景色与透明度
        lock, // 同v-loading的修饰符
        // loading需要覆盖的DOM节点，默认为body
        target: document.querySelector(node),
        text: str, // 加载文案
    // spinner: 'el-icon-loading',	 //加载图标
    })
}

const uploadFileStatus = ref(false)
const loadingInstance = ref<any>(null)
function uploadFileStart() {
    uploadFileStatus.value = true
    loadingInstance.value = servicesLoading('.el-dialog.upload-file-dialog', '正在上传中,请耐心等待', true, 'rgba(0,0,0,0.3)')
}
function uploadSuccess(data: any) {
    if (data.url) {
        uploadFileStatus.value = false
        setTimeout(() => {
            loadingInstance.value.close()
            ElMessage.success('图片上传成功')
        }, 1000)
    }
}

watchEffect(() => {
    if (form.value) {
        const params = {
            ...form.value,
            status: form.value.status === 1,
        }
        state.value = cloneDeep(params)
    }
})
</script>

<template>
    <PlusDialog v-model="visible"
                :title="title"
                width="800"
                @cancel="cancel"
                @closed="reset"
    >
        <PlusForm ref="formRef"
                  v-model="state"
                  :columns="columns"
                  :label-width="100"
                  :rules="rules"
                  :has-footer="false"
        >
            <template #plus-field-imageUrl>
                <FlUpload ref="flUpload"
                          v-model="state.imageUrl"
                          is-mall-admin
                          accept=".jpg,.png,.jpeg"
                          @start="uploadFileStart"
                          @success="uploadSuccess"
                />
            </template>
        </PlusForm>

        <template #footer>
            <div class="mx-auto">
                <el-button @click="cancel">
                    取消
                </el-button>

                <SubmitBtn type="primary"
                           :loading="isPending"
                           @click="save"
                >
                    保存
                </SubmitBtn>
            </div>
        </template>
    </PlusDialog>
</template>
